<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车</title>
    <link rel="stylesheet" href="./static/css/global.css">
    <link rel="stylesheet" href="./static/css/myShoppingCar.css">
    <script src="./static/js/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/js/css/layui.css" media="all">
    <script src="./static/js/global/jquery-3.2.1.min.js" charset="utf-8"></script>
</head>

<body>
    <div class="global-title">
        <div>
            <!-- <span class="title-left">嗨，欢迎来贝链嗨购</span> -->
            <div class="title-left-login">
                <span>嗨，欢迎来贝链嗨购</span>
                <div class="title-left-login-user">
                    <img src="./static/img/img1.png" alt="">
                    <span>这里是用户昵称</span>
                </div>
                <a href="./mine.html">个人中心</a>
                <a href="">收藏夹</a>
                <a href="">退出账户</a>
            </div>
            <div class="title-right">
                <a href="/shopLogin.html">供应商登录</a>
                <a href="./help.html">帮助中心</a>
            </div>
        </div>
    </div>
    <div class="global-header">
        <a href="./index.html" class="header-left">
            <img src="./static/img/header_logo.png" alt="">
            <span>个人中心</span>
        </a>
    </div>
    <div class="global-mine-title">
        <a href="">首页></a>
        <span>个人中心</span>
    </div>
    <div class="global-mine-cont">
        <div class="global-mine-menu">
            <a href="./mine.html" class="global-mine-menu-list">
                个人主页
            </a>
            <a href="./userInfo.html" class="global-mine-menu-list">
                基本资料
            </a>
            <a href="./myCart.html" class="global-mine-menu-list">
                我的购物车
            </a>
            <a href="./myOrder.html" class="global-mine-menu-list">
                我的订单
            </a>
            <a href="./myCoupon.html" class="global-mine-menu-list">
                我的优惠券
            </a>
            <a href="./myCollect.html" class="global-mine-menu-list">
                我的收藏
            </a>
            <a href="./myNews.html" class="global-mine-menu-list">
                消息
                <span>111</span>
            </a>
            <a href="./myBill.html" class="global-mine-menu-list global-mine-menu-list-this">
                我的发票
            </a>
            <a href="./myPassword.html" class="global-mine-menu-list">
                修改密码
            </a>
            <a href="javascript:;" id="service" class="global-mine-menu-list">
                联系客服
            </a>
        </div>
        <div class="global-mine-cont-right">
            <div class="bill-title">
                <div class="bill-title-left">
                    <div class="action">
                        全部商品
                    </div>
                    <div>
                        预售商品
                    </div>
                    <div>
                        现货商品
                    </div>
                </div>
            </div>
            <div class="goods-title">
                <div>商品</div>
                <div>已选规格</div>
                <div>原价</div>
                <div>数量</div>
                <div>小计</div>
            </div>
            <!-- 全部 -->
            <div class="slect-cont slect-cont1">
                <div class="order-cont">
                    <div class="order-title">
                        <div>
                            <input type="checkbox"  id="company1All" >
                            <a href="">威海朝鲜食品公司</a>
                            <a href="">
                                <img src="./static/img/bill_qq.png" alt="">
                            </a>
                            <a href="javascript:;" class="shop_service">
                                <img src="./static/img/bill_service.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company1_1">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="1" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company1_2">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="2" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                    <div class="order-title">
                        <div>
                            <input type="checkbox"  id="company2All" >
                            <a href="">威海朝鲜食品公司</a>
                            <a href="">
                                <img src="./static/img/bill_qq.png" alt="">
                            </a>
                            <a href="javascript:;" class="shop_service">
                                <img src="./static/img/bill_service.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company2_1">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="2" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company2_2">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="1" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                </div>
            </div>
            <!-- 未寄出 -->
            <div class="slect-cont slect-cont2" style="display:none;">
                <div class="order-cont">
                    <div class="order-title">
                        <div>
                            <input type="checkbox"  id="company2All" >
                            <a href="">威海朝鲜食品公司</a>
                            <a href="">
                                <img src="./static/img/bill_qq.png" alt="">
                            </a>
                            <a href="javascript:;" class="shop_service">
                                <img src="./static/img/bill_service.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company2_2">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="1" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                </div>
            </div>
            <!-- 已寄出 -->
            <div class="slect-cont slect-cont3" style="display:none;">
                <div class="order-cont">
                    <div class="order-title">
                        <div>
                            <input type="checkbox"  id="company2All" >
                            <a href="">威海朝鲜食品公司</a>
                            <a href="">
                                <img src="./static/img/bill_qq.png" alt="">
                            </a>
                            <a href="javascript:;" class="shop_service">
                                <img src="./static/img/bill_service.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="goods-list">
                        <div>
                            <input type="checkbox"  id="company2_2">
                            <img src="./static/img/img1.png" alt="">
                            <div>
                                <div>
                                    智利熟冻帝王蟹5.0-5.4斤/只4斤/只4斤/只4斤/只
                                </div>
                                <div>
                                    <div class="goods-back1">预售</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            60kg/箱
                            <button>修改</button>
                        </div>
                        <div>￥888.00</div>
                        <div>
                            <section class="cart-table-content-td4">
                                <input type="button" value="+" onclick="add(this)"/>
                                <input type="text" class="text_box" value="1" />
                                <input type="button" value="-" onclick="del(this)"/>
                            </section>
                        </div>
                        <div class="goods-list-no">￥888.00</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="recommend">
        <div class="title">
            <div class="left">
                <img src="./static/img/shopping_car_p2.png" alt="">
                相关推荐
            </div>
            <div class="right">
                更多 >
            </div>
        </div>
        <div class="body">
            <div>
                <img src="./static/img/commodity1.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity2.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity3.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity4.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
        </div>      
    </div>
    
    <footer>
        <div>
            <input type="checkbox"  id="selectAll">全选
            <p class="removesomething">删除选中产品</p>
            <p>移入收藏夹</p>
            <div>
                <p>已选<input value="1"  class="all">件商品</p>
                <p>需要支付:</p>
                <div>￥1476.00</div>
                <button>确认并支付</button>
            </div>
        </div>
    </footer>

    <script>
    // 选项卡
    $(function(){
        $(".bill-title-left>div").click(function(){
            $(".bill-title-left>div").eq($(this).index()).addClass("action").siblings().removeClass("action");
            $(".slect-cont").hide().eq($(this).index()).show();
        });
    });
    </script>
    <script>
        $(function () { 
            //全选和全不选
            $('#company1All').bind('click',function(){
                if(this.checked){   //全选
                    $("input[id^='company1']").each(function(){
                        $(this).prop('checked',true);
                    })
                }else{    //全不选
                    $("input[id^='company1']").each(function(){
                        $(this).prop('checked',false);
                    })
                }
            });
            $('#company2All').bind('click',function(){
                if(this.checked){   //全选
                    $("input[id^='company2']").each(function(){
                        $(this).prop('checked',true);
                    })
                }else{    //全不选
                    $("input[id^='company2']").each(function(){
                        $(this).prop('checked',false);
                    })
                }
            });
            $('#selectAll').bind('click',function(){
                if(this.checked){   //全选
                    $("input[id^='company1']").each(function(){
                        $(this).prop('checked',true);
                    })
                    $("input[id^='company2']").each(function(){
                        $(this).prop('checked',true);
                    })
                    $("input[id^='company1All']").each(function(){
                        $(this).prop('checked',true);
                    })
                    $("input[id^='company2All']").each(function(){
                        $(this).prop('checked',true);
                    })
                }else{    //全不选
                    $("input[id^='company1']").each(function(){
                        $(this).prop('checked',false);
                    })
                    $("input[id^='company2']").each(function(){
                        $(this).prop('checked',false);
                    })
                    $("input[id^='company1All']").each(function(){
                        $(this).prop('checked',false);
                    })
                    $("input[id^='company2All']").each(function(){
                        $(this).prop('checked',false);
                    })
                }
            });
        })
    </script>
    <script>
    // 页面加载完毕计算商品数量
    $(function(){ 
        var sum = 0;
        $(".slect-cont1 input[type='text']").each(function(j,item){
            sum = sum + parseInt(item.value);
            return
        });
        console.log(sum);
        $(".all").val(sum);
        return
    }); 
    //页面商品数量计算
    $("input").click(function(){
        var sum = 0;
        $(".slect-cont1 input[type='text']").each(function(j,item){
            sum = sum + parseInt(item.value);
            return
        });
        console.log(sum);
        $(".all").val(sum);
        return
    });
    $(".removesomething").click(function(){
        
    })
    </script>
    <script>
        //商品数量控制
        function add(q){//商品点击增加
            var good_num = $(q).parent().find('input[class*=text_box]');
            var old_num = $(good_num).val();
            var new_num=parseInt(old_num)+1;
            $(good_num).val(new_num);  
            var one_price=$(q).parent().parent().find(".product-price span").text();
            var new_money=parseInt(one_price)*parseInt((good_num).val());
            var total_price = $(q).parent().parent().find(".font-total-price span");
            $(total_price).text(new_money);
            var a= $(".font-total-price span");
            var m=0;
            for(var i=0;i<a.length;i++){
                m+=Number(a[i].textContent);
            }
            $("#all_price").text("￥"+m);
            $("#all_total_price").text("￥"+m);
        }
        function del(q){//商品点击减少
            var good_num = $(q).parent().find('input[class*=text_box]');
            var old_num = $(good_num).val();
            var new_num=parseInt(old_num)-1;
            $(good_num).val(new_num);
            if(new_num<1){
                $(good_num).val(1);
            }
            var one_price=$(q).parent().parent().find(".product-price span").text();
            var new_money=parseInt(one_price)*parseInt((good_num).val());
            var total_price = $(q).parent().parent().find(".font-total-price span");
            $(total_price).text(new_money);
            var a= $(".font-total-price span");
            var m=0;
            for(var i=0;i<a.length;i++){
                m+=Number(a[i].textContent);
            }
            $("#all_price").text("￥"+m); 
            $("#all_total_price").text("￥"+m);
        }
    </script>
    <script>
        layui.use('layer', function () { //独立版的layer无需执行这一句
            var layer = layui.layer; //独立版的layer无需执行这一句
            $('#service').click(function () {
                layer.open({
                    type: 2,
                    title: '在线客服',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],
                    content: '//fly.layui.com/'
                });
            });
            $('.shop_service').click(function () {
                layer.open({
                    type: 2,
                    title: '在线客服',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],
                    content: '//fly.layui.com/'
                });
            });
        });
    </script>
</body>

</html>